<script setup></script>

<template name="skeleton">
    <view class="sk-container">
        <scroll-view scroll-y="true" class="viewport viewport" enable-back-to-top="true">
            <view class="goods goods">
                <view class="preview preview">
                    <swiper circular="true" class="image image" current="0" autoplay="false">
                        <swiper-item
                            style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
                            <image mode="aspectFill" class="sk-image"></image>
                        </swiper-item>
                    </swiper>
                    <view class="indicator indicator">
                        <text class="current sk-transparent sk-opacity">1</text>
                        <text class="split sk-transparent sk-opacity">/</text>
                        <text class="total sk-transparent sk-opacity">5</text>
                    </view>
                </view>
                <view class="meta meta">
                    <view class="price price">
                        <text class="symbol sk-transparent sk-text-14-2857-425 sk-text">￥</text>
                        <text class="number sk-transparent sk-text-14-2857-386 sk-text">59.00</text>
                    </view>
                    <view class="name ellipis sk-transparent sk-text-14-2857-374 sk-text">居家旅行常备家用医疗包（含医疗用品）</view>
                    <view class="desc sk-transparent sk-text-0-0000-381 sk-text">装备齐全，我的随行医护师app</view>
                </view>
                <view class="action action">
                    <view class="item arrow sk-pseudo sk-pseudo-circle">
                        <text class="label sk-transparent sk-text-14-2857-802 sk-text">选择</text>
                        <text class="text ellipsis sk-transparent sk-text-14-2857-262 sk-text">请选择商品规模</text>
                    </view>
                    <view class="item arrow sk-pseudo sk-pseudo-circle">
                        <text class="label sk-transparent sk-text-14-2857-84 sk-text">送至</text>
                        <text class="text ellipsis sk-transparent sk-text-14-2857-790 sk-text">请选择收货地址</text>
                    </view>
                    <view class="item arrow sk-pseudo sk-pseudo-circle">
                        <text class="label sk-transparent sk-text-14-2857-223 sk-text">服务</text>
                        <text class="text ellipsis sk-transparent sk-text-14-2857-178 sk-text">免费包邮 七天无理由退款 极速退款</text>
                    </view>
                </view>
                <view class="detail detail panel panel">
                    <view class="title title">
                        <text class="sk-transparent sk-text-0-0000-990 sk-text">详情</text>
                    </view>
                    <view class="content content">
                        <view class="properties properties">
                            <view class="item item">
                                <text class="label sk-transparent sk-text-25-0000-176 sk-text">医疗器械备案凭证：</text>
                                <text class="value sk-transparent sk-text-25-0000-302 sk-text">浙绍械备20190043号</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="toolbar toolbar" style="padding-bottom:34px">
            <view class="icons icons">
                <button class="icons-button sk-transparent sk-button sk-pseudo sk-pseudo-circle">
                    <text class="icon-heart sk-pseudo sk-pseudo-circle"></text>收藏 </button>
                <button class="icons-button sk-transparent sk-button sk-pseudo sk-pseudo-circle" open-type="contact">
                    <text class="icon-handset sk-pseudo sk-pseudo-circle"></text>客服 </button>
                <navigator class="icons-button sk-transparent" open-type="switchTab">
                    <text class="icon-cart sk-pseudo sk-pseudo-circle"></text>购物车
                </navigator>
            </view>
            <view class="buttons buttons">
                <view class="addcart sk-transparent sk-text-31-9444-649 sk-text" style="background-position-x: 50%;">
                    加入购物车</view>
                <view class="buynow sk-transparent sk-text-31-9444-489 sk-text" style="background-position-x: 50%;">立即购买
                </view>
            </view>
        </view>
    </view>
</template>

<style>
.sk-transparent {
    color: transparent !important;
}

.sk-opacity {
    opacity: 0 !important;
}

.sk-text-14-2857-425 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 47.6000rpx;
    position: relative !important;
}

.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
}

.sk-text-14-2857-386 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 78.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-374 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
}

.sk-text-0-0000-381 {
    background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
    background-size: 100% 24.0000rpx;
    position: relative !important;
}

.sk-text-14-2857-802 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-262 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-84 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-790 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-223 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-14-2857-178 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 36.4000rpx;
    position: relative !important;
}

.sk-text-0-0000-990 {
    background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
    background-size: 100% 28.0000rpx;
    position: relative !important;
}

.sk-text-25-0000-176 {
    background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
    background-size: 100% 52.0000rpx;
    position: relative !important;
}

.sk-text-25-0000-302 {
    background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
    background-size: 100% 52.0000rpx;
    position: relative !important;
}

.sk-text-31-9444-649 {
    background-image: linear-gradient(transparent 31.9444%, #EEEEEE 0%, #EEEEEE 68.0556%, transparent 0%) !important;
    background-size: 100% 72.0000rpx;
    position: relative !important;
}

.sk-text-31-9444-489 {
    background-image: linear-gradient(transparent 31.9444%, #EEEEEE 0%, #EEEEEE 68.0556%, transparent 0%) !important;
    background-size: 100% 72.0000rpx;
    position: relative !important;
}

.sk-button {
    color: #EFEFEF !important;
    background: #EFEFEF !important;
    border: none !important;
    box-shadow: none !important;
}

.sk-image {
    background: #EFEFEF !important;
}

.sk-pseudo::before,
.sk-pseudo::after {
    background: #EFEFEF !important;
    background-image: none !important;
    color: transparent !important;
    border-color: transparent !important;
}

.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
    border-radius: 0 !important;
}

.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
    border-radius: 50% !important;
}

.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}
</style>